<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>signup</title>
    <link rel="stylesheet" type="text/css" href="./css/login.css"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <script>
        //用于切换验证码
        function reloadCaptcha(){
            var captchaImg = document.getElementById("captchaImg");
            captchaImg.src = "/captcha?t="+(new Date()).getTime();
        }
        //用于发送邮箱验证码
        function sendEmail(){
            var toEmail = document.getElementById("email");
            var msg = toEmail.parentElement.lastElementChild;
            var input = document.getElementsByName("emailCode")[0];
            var icon = document.getElementById("spinner");
            var sendButton = icon.parentElement;
            icon.style.display="inline";
            sendButton.style.pointerEvents="none";
            sendButton.style.opacity="0.5";
            fetch('/sendEmail?email='+toEmail.value)
            .then(function(res){
                return res.json();
            })
            .then(function(data){
                if(data==1){
                    alert("发送成功！");
                    input.disabled=false;
                    input.style.background="white";
                }else if(data==2){
                    alert("邮箱已被注册！\n请更换邮箱");
                }else{
                    alert("发送失败！\n请检查邮箱是否正确");
                    msg.innerHTML="*邮箱格式不正确";
                    msg.style.display="inline";
                    toEmail.style.border="1px solid #fe7300";
                }
                icon.style.display="none";
                sendButton.style.pointerEvents="auto";
                sendButton.style.opacity="1";
            })
        }
        //用于判空
        function handlerBlur(element){
            var content = element.value;
            var msg = element.parentElement.lastElementChild;
            if(content==""){
                msg.innerHTML="*不能为空";
                msg.style.display="inline";
                element.style.border="1px solid #fe7300";
                if(element.getAttribute("name")=="emailCode"){
                    element.style.borderRight="0";
                }
            }
            if(element.getAttribute("name")=="password"&&content.length<6){
                msg.innerHTML="*密码不少于6位";
                msg.style.display="inline";
                element.style.border="1px solid #fe7300";
            }
        }
        //获得焦点事件
        function handlerFocus(element){
            var msg = element.parentElement.lastElementChild;
            msg.style.display="none";
            element.style.border="1px solid lightgrey";
            if(element.getAttribute("name")=="emailCode"){
                element.style.borderRight="0";
            }
        }
        //判断手机号、邮箱是否已经注册
        function checkHandlerBlur(element){
            var content = element.value;
            var msg = element.parentElement.lastElementChild;
            if(content==""){
                msg.innerHTML="*不能为空";
                msg.style.display="inline";
                element.style.border="1px solid #fe7300";
            }else{
                fetch('/checkInfo?str='+element.value+'&info='+element.getAttribute("name"))
                .then(function(res){
                    return res.json();
                })
                .then(function(data){
                    if(data==0){
                        msg.innerHTML="*已注册";
                        msg.style.display="inline";
                        element.style.border="1px solid #fe7300";
                    }
                })
            }
        }
    </script>
</head>
<body>
<main>
    <div class="right-card">
        <form action="/doSignup" method="post" class="signup">
            <div class="top">
                <h3 class="signup">注册</h3>
                <h3><a href="/login">登录</a></h3>
            </div>
            <p>
                <span class="icon mobile"><i class="fa fa-mobile"></i></span>
                <input th:value="${user.phone}" type="text" name="phone" onblur="checkHandlerBlur(this)" onfocus="handlerFocus(this)" placeholder="手机号" autocomplete="off">
                <span th:text="${phoneMsg}" class="error-msg"></span>
            </p>
            <p>
                <span class="icon"><i class="fa fa-envelope"></i></span>
                <input th:value="${user.email}" type="text" name="email" id="email" onblur="checkHandlerBlur(this)" onfocus="handlerFocus(this)" placeholder="邮箱" autocomplete="off">
                <span th:text="${emailMsg}" class="error-msg"></span>
            </p>
            <p>
                <span class="icon"><i class="fa fa-code"></i></span>
                <input type="text" class="email-code" name="emailCode" onblur="handlerBlur(this)" onfocus="handlerFocus(this)" placeholder="邮箱验证码" autocomplete="off" disabled>
                <a href="javascript:sendEmail()" class="get-email-code">
                    <span id="spinner" style="display:none;"><i class="fa fa-spinner fa-spin"></i></span>
                    <span>获取验证码</span>
                </a>
                <span th:text="${emailCodeMsg}" class="error-msg"></span>
            </p>
            <p>
                <span class="icon"><i class="fa fa-lock"></i></span>
                <input th:value="${user.password}" type="password" onblur="handlerBlur(this)" onfocus="handlerFocus(this)" name="password" placeholder="密码不少于6位" autocomplete="off">
                <span th:text="${passwordMsg}" id="msg1" class="error-msg"></span>
            </p>
            <p><button type="submit">立即注册</button></p>
        </form>
    </div>
</main>
</body>
</html>